<template>
  <div style="padding:20px">
    <span>npm install vue-codemirror</span>
    <div style="text-align:center">
      <span style="font-size:20px">xml编辑器</span>
      <a-button type="primary" style="margin:10px" @click="format"
        >格式化</a-button
      >
    </div>
    <xml-code-mirror
      v-model="xml"
      placeholder="请输入模型"
      ref="xmlCodeMirror"
    />
    <div style="text-align:center">
      <span style="font-size:20px">json编辑器</span>
      <a-button type="primary" style="margin:10px" @click="formatJson"
        >格式化</a-button
      >
    </div>
    <json-code-mirror
      v-model="json"
      placeholder="请输入模型"
      ref="jsonCodeMirror"
    />
  </div>
</template>

<script>
import XmlCodeMirror from "./components/XmlCodeMirror";
import JsonCodeMirror from "./components/JsonCodeMirror";
export default {
  name: "codeMirror",
  components: { XmlCodeMirror, JsonCodeMirror },
  data() {
    return {
      xml: "",
      json: ""
    };
  },
  methods: {
    format() {
      if (!this.xml) {
        // this.$message.error('输入模型为空');
        return;
      }
      this.$refs.xmlCodeMirror.format();
    },
    formatJson() {
      if (!this.json) {
        // this.$message.error('输入模型为空');
        return;
      }
      this.$refs.jsonCodeMirror.format();
    }
  }
};
</script>

<style></style>
